<template>
  <div class="content">
    <NavBar></NavBar>
    <!-- <div>{{ appAgent }}</div> -->
    <div class="title flex-row flex-align-center">
      <img class="pic" src="./img/Path.png" alt="" />
      <div class="text">热门问题</div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="item in list" :key="item.id" @click="showContent(item)">
        <div class="wenti flex-row flex-align-center">
          <img src="./img/yiwenicon.png" alt="" class="pict" />
          <div class="yiwen">{{ item.question }}</div>
          <van-icon
            :name="index == item.id ? 'arrow-up' : 'arrow-down'"
            class="icon"
            size="18px"
          />
        </div>
        <div class="paragraph" v-show="index == item.id">
          <!-- {{ item.answer }} -->
          <div :class="'answer' + index" class="answer-text" v-html="item.answer"></div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import NavBar from '@/components/h5header'
import API from '@/services/h5/my'
export default {
  components: { NavBar },
  data() {
    return {
      appAgent: window.navigator.userAgent.toLocaleLowerCase(),
      value: '',
      index: null,
      question: '',
      list: [],
      length: 5,
      currentPage: 0,
      loading: false,
      finished: false,
      total: 0,
      search: ''
    }
  },
  methods: {
    onClickLeft() {
      window.history.go(-1)
    },
    showContent(item) {
      if (this.index === item.id) {
        this.index = null
      } else {
        this.index = item.id
      }
    },
    async onLoad() {
      this.currentPage += 1
      this.loading = true
      this.finished = false
      let params = {
        length: this.length,
        curPage: this.currentPage
      }
      const res = await API.helpcenter(params)
      if (res && res.data && res.data.code === 1000) {
        this.list = this.list.concat(res.data.data.list)
        this.total = res.data.data.count
        if (this.list.length < this.total) {
          this.loading = false
        } else {
          this.loading = false
          this.finished = true
          return
        }
      }
    }
  },
  mounted() {}
}
</script>
<style scoped lang="less">
.content {
  background-color: #fafafa;
  height: calc(100vh);
  .c-mnhldr {
    &-search {
      width: 345px;
      margin: 15px 15px 0 15px;
      .van-cell {
        padding-top: 4.5px;
        padding-bottom: 5.5px;
        height: 32px;
        border-radius: 17px 0 0 17px;
        border: 1px solid @c-color-primary;
      }
      &-img {
        width: 16px;
        height: 17px;
      }
      &-btn {
        width: 56px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 13px;
        color: #fff;
        border-radius: 0 17px 17px 0;
        background: @c-color-primary;
      }
    }
  }
  .title {
    width: 345px;
    padding: 15px;
    .pic {
      width: 17px;
      height: 17px;
    }
    .text {
      font-size: 16px;
      color: #333;
    }
  }
  .classify {
    width: 345px;
    height: 22px;
    padding: 15px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 2px 0;
    .margin {
      float: left;
      width: 78px;
      height: 22px;
      border: 0.5px solid #fc4102;
      border-radius: 4px;
      margin-right: 12px;
      .picture {
        width: 17px;
        height: 12.5px;
        margin-left: 5px;
      }
      .picture1 {
        width: 13px;
        height: 16.5px;
        margin-left: 5px;
      }
      .picture2 {
        width: 11px;
        height: 13px;
        margin-left: 5px;
      }
      .problem {
        font-size: 11px;
        color: #666;
        margin-left: 5px;
      }
    }
  }
  .wenti {
    width: 345px;
    height: 18px;
    padding: 15px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.01) 0 2px 2.5px 0;
    // margin-bottom: 8px;
    position: relative;
    .pict {
      width: 16px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
    .yiwen {
      font-size: 15px;
      color: #333;
      position: absolute;
      left: 35px;
    }
    .icon {
      color: #999;
      position: absolute;
      right: 15px;
    }
  }
  .paragraph {
    width: 345px;
    line-height: 20px;
    padding: 0 15px 20px 15px;
    font-size: 13px;
    color: #999;
    background-color: #fff;
    margin-bottom: 12px;
  }
}
.answer-text {
  /deep/p {
    margin: 0;
  }
}
</style>
